<html>
    <head>

    </head>

    <body>
        <div id="app">
            <div>
                <input type="text" v-model="name" placeholder="姓名" >
                <input type="text" v-model="age" placeholder="年龄" >
                <input type="text" v-model="email" placeholder="邮箱" >
                <input type="text" v-model="tel" placeholder="电话" >
            </div>
            <div>
                <p>姓名：<span>{{name}}</span></p>
                <p>年龄：<span>{{age}}</span></p>
                <p>邮件：<span>{{email}}</span></p>
                <p>
                    <p>
                    电话：<span>{{tel}}</span>
                    </p>
                </p>
            </div>
            <button id="btn">改变名字</button>
        </div>
       

        <script src="mvvm_proxy.js"></script>

        <script>
            const app = new MVVM('#app', {
                name: 'jiang',
                age: '',
                email: '',
                tel: ''
            })

            document.querySelector('#btn').addEventListener('click', function () {
                // app.setData('name', '熊毛毛')
                app.data.name = "熊毛毛"
            })
        </script>
    </body>
</html>